<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于css的下拉菜单的设计</title>
<!--基础于css，所以要写style-->
    <style type="text/css">
        /*给整个内容设置背景色和外边距*/
        body{
            background-color: #278BF4;
            margin: 0px;
        }
        /*清除ul样式*/
        ul{
            list-style: none;
            padding-inline-start: 0px;
        }
        /*设置class为nav中第一代子类为的li内容：下拉菜单为为向左浮动，且通过border-right设置右边边框线*/
        .nav >li{
            float: left;
            border-right: 2px solid #ffe528;
        }
        /*设置下拉菜单中的最后一个元素为没有右边边框线*/
        .nav >li:last-child{
            float: left;
            border-right: 2px #ffe528;
        }
        /*设置nav中的所有a的属性*/
        .nav a{
            display: inline-block;
            text-decoration: none;
            width: 150px;
            text-align: center;
            color: white;
            background-color: darkgray;
            padding: 10px 2px;
        }
        .content{

        }
        .inner-content{
            opacity: 0;
        }
        .inner-content4{
            opacity: 0;
        }
        .content:hover .inner-content{
            opacity: 1;
        }
        .content4:hover .inner-content4{
            opacity: 1;
        }

    </style>

</head>
<body>
<!--先写body内容-->
<ul class="nav">
    <li><a href="#">下拉菜单</a> </li>
    <li class="content"><a href="#">下拉菜单</a>
        <ul class="inner-content">
            <li><a href="#">二级子菜单1</a> </li>
            <li><a href="#">二级子菜单2</a> </li>
            <li><a href="#">二级子菜单3</a> </li>
            <li><a href="#">二级子菜单4</a> </li>
        </ul>
    </li>
    <li class="content4"><a href="#">下拉菜单</a>
        <ul class="inner-content4">
            <li><a href="#">二级元素1</a> </li>
            <li><a href="#">二级元素2</a> </li>
            <li><a href="#">二级元素3</a> </li>
            <li><a href="#">二级元素4</a> </li>
        </ul>


    </li>
    <li><a href="#">下拉菜单</a> </li>
    <li><a href="#">下拉菜单</a> </li>
</ul>
<p>其他内容</p>
</body>
</html>